<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <script src="../dist/claygl.js"></script>
    </head>
    <body style="margin:0px;">
        <canvas id="main"></canvas>
        <script type="text/javascript">
            var renderer = new clay.Renderer({
                canvas: document.getElementById('main'),
                // devicePixelRatio: 1.0
            });
            renderer.resize(window.innerWidth, window.innerHeight);
            var camera = new clay.camera.Perspective({
                aspect: renderer.getViewportAspect()
            });
            camera.position.set(0, 0, 6);

            var scene = new clay.Scene();

            var loader = new clay.loader.GLTF();
            loader.load('assets/models/suzanne/suzanne_high.gltf');
            var suzanneGeometry;
            loader.on('success', function(res) {
                suzanneGeometry = res.scene.getNode('Suzanne').geometry;

                var cubemap = clay.util.texture.loadTexture(
                    'assets/textures/hdr/pisa.hdr',
                    {
                        exposure: 3
                    },
                    function () {
                        cubemap.flipY = false;
                        var ambientCubemapLight = new clay.light.AmbientCubemap({
                            cubemap: cubemap
                        });
                        ambientCubemapLight.prefilter(renderer);
                        scene.add(ambientCubemapLight);

                        var skybox = new clay.plugin.Skybox({
                            scene: scene,
                            environmentMap: ambientCubemapLight.cubemap
                        });
                        skybox.material.define('fragment', 'RGBM_DECODE');
                        skybox.material.set('lod', 3.0);

                        for (var i = 0; i < 10; i++) {
                            // var material = new clay.Material({
                            //     shader: clay.shader.library.get('clay.standard')
                            // });
                            // material.set('color', [1, 1, 1]);
                            // material.set('glossiness', i / 12);
                            var material = new clay.StandardMaterial({
                                metalness: 1,
                                // color: [0.7, 0.0, 0.0],
                                roughness: i / 12
                            });
                            var mesh = new clay.Mesh({
                                material: material,
                                geometry: suzanneGeometry
                            });
                            mesh.position.set((i - 5) * 2.1, 0, 0);
                            scene.add(mesh);
                        }

                        renderer.render(scene, camera);
                    }
                );
            });

            var control = new clay.plugin.OrbitControl({
                target: camera,
                domElement: renderer.canvas
            });

            var timeline =  new clay.Timeline();
            timeline.start();
            timeline.on('frame', function(deltaTime) {
                control.update(deltaTime);
                renderer.render(scene, camera);
            });

            window.onresize = function() {
                renderer.resize(window.innerWidth, window.innerHeight);
                camera.aspect = renderer.getViewportAspect();
            };
        </script>
</html>